<template>
  <view class="content" v-if="shenheStatus == 0">
    <view class="mForm">
      <u-form :model="form" label-width="auto">
        <u-form-item label="开始时间" border-bottom>
          <div @click="showStart = true" class="flex-y-center">
            <div
              :style="{ color: form.start_date ? '#333' : '#8c8c8c' }"
              class="flex-w-1 u-p-l-20"
            >
              {{ form.start_date ? form.start_date : "请选择开始时间" }}
            </div>
            <div class="iconfont icon-arrow-right color-999 u-font-26"></div>
          </div>
          <u-picker
            :default-time="form.start_date"
            :params="dateParams"
            @confirm="dateChange($event, 'start')"
            v-model="showStart"
            mode="time"
          ></u-picker>
        </u-form-item>
        <u-form-item label="结束时间" @click="showEnd = true">
          <div @click="showEnd = true" class="flex-y-center">
            <div
              :style="{ color: form.end_date ? '#333' : '#8c8c8c' }"
              class="flex-w-1 u-p-l-20"
            >
              {{ form.end_date ? form.end_date : "请选择结束时间" }}
            </div>
            <div class="iconfont icon-arrow-right color-999 u-font-26"></div>
          </div>
          <u-picker
            :default-time="form.end_date"
            @confirm="dateChange($event, 'end')"
            :params="dateParams"
            v-model="showEnd"
            mode="time"
          ></u-picker>
        </u-form-item>
      </u-form>
    </view>

    <view class="submit" @click="submit">
      <view class="m-btn"> 提交</view>
    </view>
  </view>
</template>

<script>
import   { updateInfo,index} from "@/api/service-home";

export default {
  components: {},

  data() {
    return {
      dateParams: {
        hour: true,
        minute: true,
      },
      form: {
        start_date: "",
        end_date: "",
      },
      showStart: false,
      showEnd: false,
    };
  },
  computed: {
    endDate: {
      get() {
        if (!this.form.end_date) {
          return "";
        }
        let dateArr = this.form.end_date.split(":");
        return {
          hour: dateArr[0],
          minute: dateArr[1],
        };
      },
      set(val) {
        this.form.end_date = `${val.hour}:${val.minute}`;
      },
    },
    startDate: {
      get() {
        if (!this.form.start_date) {
          return "";
        }
        let dateArr = this.form.start_date.split(":");
        return {
          hour: dateArr[0],
          minute: dateArr[1],
        };
      },
      set(val) {
        this.form.start_date = `${val.hour}:${val.minute}`;
      },
    },
  },

  onLoad(opi) {
    // if (opi.date) {
    //   let arrDate = opi.date.split("-");
    //   this.form.start_date = arrDate[0];
    //   this.form.end_date = arrDate[1];
    // }
    this.loadData();
  },

  methods: {
    async loadData() {
      var res = await index({}, true);
      this.form.start_date = res.data.workerInfo.book_start_time;
      this.form.end_date = res.data.workerInfo.book_end_time;
    },
    async submit() {
      if (!this.form.start_date) return this.$utils.toast("请选择开始时间");
      if (!this.form.end_date) return this.$utils.toast("请选择结束时间");
      let form = {
        key: ["book_start_time", "book_end_time"],
        val: [
          this.form.start_date.replace(":", ""),
          this.form.end_date.replace(":", ""),
        ],
      };

      await updateInfo(form, true);
      this.$utils.goBack();
    },
    dateChange(e, type) {
      switch (type) {
        case "end":
          this.endDate = e;
          break;

        default:
          this.startDate = e;
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: 1px solid #f1f1f1;

  &:last-of-type {
    border-bottom: 0;
  }
}

.mFormRig {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.mForm {
  margin-bottom: 12rpx;
  padding: 0 24rpx;
  background: #fff;

  .icon-arrow-right {
    margin-left: 10rpx;
  }

  .inp {
    width: 100%;

    input {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 32rpx;
    }
  }
}

.des {
  padding: 8rpx 24rpx 0;
  color: #8c8c8c;
  font-size: 24rpx;
}

.m-btn {
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}

.submit {
  padding: 80rpx 24rpx 0;
}
</style>
